<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星星点灯</title>
  <meta name="description" content="星星点灯网，致力于关爱自闭症人群">
  <meta name="keywords" content="自闭症，关爱，志愿者">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/post-detail.css">
  <link rel="stylesheet" href="./css/head.css">
   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 官网提供的 axios 在线地址 -->
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <!-- 头部 -->
  <header id="head">
    <!-- 快捷菜单  -->
    <div class="post-shortcut">
        <nav class="container">
          <div class="logo fl">
          </div>
            <ul class="left fl">
                <li><a href="#">活动</a></li>
                <li>|<a href="./post.html">论坛</a></li>
                <li>|<a href="#">义卖</a></li>
            </ul>
            <ul class="right fr">
                <li v-if="isLoad" @click="load"><a href="#">未登录</a>|</li>
                <li v-if="!isLoad"><a href="#"><div class="ava"><img src="./uploads/ava.jpg" alt="" @mouseover="cardLoad" :class="!cardShow?'small':'big'"></div></a><span>吃果冻</span>|</li>
                <li v-if="!isLoad" @click="load"><a href="#">退出登录</a>|</li>
                <li v-if="!isLoad"><a href="#">个人主页</a>|</li>
                <li><a href="#">客服</a></li>
            </ul>
        </nav>
    </div>
    <div class="card"  v-if="cardShow" @mouseleave="cardLoad">
        <ul>
            <li>监护人</li>
            <li><a href="#">收到的消息</a></li>
            <li><a href="#">收到的回复</a></li>
            <li><a href="#">待办的活动</a></li>
        </ul>
    </div>
</header>
  <div class="nav container">
    <div class="title">
      <h2 class="fl">
        经验贴 <span>交流经验 更好呵护</span>
      </h2>
    </div>
    <div class="search fl">
      <input type="search" placeholder="搜一搜">
    </div>
  </div>
  <div class="post-list container">
    <ul>
      <li>
        <div class="a-post clearfix">
          <div class="post-head">
            <div class="views fl">
              <span>100次浏览</span>
            </div>
            <div class="headline fl">
              <h2>标题标题标题标题标题标题标题标题标题标题</h2>
            </div>
            <div class="post-info fr">
              <span>吃果冻</span>
              <span>2021-07-28 16:14</span>
            </div>
            <div class="content fl">
              <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>
              <span>......</span>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="a-post clearfix">
          <div class="post-head clearfix">
            <div class="views  fl">
              <span>100次浏览</span>
            </div>
            <div class="headline fl">
              <h2>标题标题标题标题标题标题标题标题标题标题</h2>
            </div>
            <div class="post-info  fr">
              <span>吃果冻</span>
              <span>2021-07-28 16:14</span>
            </div>
            <div class="content  fl">
              <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>
              <span>......</span>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="a-post clearfix">
          <div class="post-head clearfix">
            <div class="views fl">
              <span>100次浏览</span>
            </div>
            <div class="headline fl">
              <h2>标题标题标题标题标题标题标题标题标题标题</h2>
            </div>
            <div class="post-info fr">
              <span>吃果冻</span>
              <span>2021-07-28 16:14</span>
            </div>
            <div class="content fl">
              <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>
              <span>......</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="posting container">
    <form>
      <input type="text" class="headline" placeholder="我的帖子主题">
      <textarea class="content" cols="110" rows="10" class="content" placeholder="输入你的帖子内容"></textarea>
      <br>
      <div class="posttype fl">
        <span>帖子类型：</span>
        <span> <label><input type="radio" name="post-type"> 经验贴</label></span>
        <span> <label><input type="radio" name="post-type"> 科普贴</label></span>
        <span> <label><input type="radio" name="post-type"> 求助贴</label></span>
        <span> <label><input type="radio" name="post-type"> 交流贴</label></span>
      </div>
      <input type="submit" class="submit">
    </form>
  </div>
  <script src="./js/head.js" type="text/javascript"></script>
</body>

</html>